.images {
    position: relative;
    z-index: 10;
    display: inline-block;
    margin: 1em;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    background-position: 62% 35%;
    background-image: radial-gradient(#ddd 5px, transparent 5px);
    background-size: 10px;
    background-repeat: no-repeat;
    background-color: #fff;
    overflow: hidden;
    transform: scale(1,1);
    transition: all 1s;
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      display: inline-block;
      border-color: transparent transparent #ddd transparent;
      border-width: 40px 20px 40px 20px;
      border-style: solid;
      transform: translate(-75%, -75%);
      content: '';
    }
    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      display: inline-block;
      border-color: transparent transparent #ddd transparent;
      border-width: 20px 10px 20px 10px;
      border-style: solid;
      transform: translate(0, -50%);
      content: '';
    }
    div {
      width: 100%;
      height: 100%;
      background-color: #fff;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    > span {
      position: absolute;
      left: 0;
      bottom: 0;
      display: inline-block;
      box-sizing: border-box;

      width: 50%;
      line-height: 2;
      text-align: center;
      background-color: #5CB85C;
      cursor: pointer;
      color: #fff;
      transform: translateY(100%);
      transition: transform .5s;

      &:last-child {
        border-left: 1px solid #fff;
        left: 50%;
        bottom: 0;
      }
    }
    &:hover {
      span {
        transform: translateY(0);
      }
    }
    &.images-close {
      margin: 0;
      width: 0;
      height: 0;
      transform: scale(0,0);
    }
}
